<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>正则验证URL</title>
</head>
<body>
    
</body>
<script>
// 在输入框中如何判断输入的是一个正确的网址，如：用户输入一个字符串，验证是否符合URL网址格式
// 正则表达式各种符号的含义：https://www.jianshu.com/p/0ef792631ec7

// 标准格式：[协议类型]://[服务器地址]:[端口号]/[资源层级UNIX文件路径][文件名]?[查询]#[片段ID]
// 完整格式：[协议类型]://[访问资源需要的凭证信息]@[服务器地址]:[端口号]/[资源层级UNIX文件路径][文件名]?[查询]#[片段ID]
// 定义一个URL
// 正则表达式中一个（）属于一个分组
let str = "http://www.zhiyou.cn/index.html?x=1&from=wx#video";
// 定义一个URL正则格式
//   //要加上\\转义才代表//
//   i 忽略大小写匹配
// ?: 只匹配不捕获
let reg =
  /^(?:(http|https|ftp):\/\/)?((?:[\w-]+\.)+[a-z0-9]+)((?:\/[^/?#]*)+)?(\?[^#]+)?(#.+)?$/i;
console.log(reg.exec(str));
// exec是RegExp对象的主要方法，根据pattern对str进行正则表达式的匹配。
// URL的格式
// 1.协议： http/https/ftp      （可能不出现，浏览器会默认添加）
// 2.域名：(数字、字母、_)
// www.baidu.com
// baidu.com
// baidu.new.cn
// baidu.new.day.cn
// 3.请求路径：                   （可能不出现）
// /
// /index.html
// /str/index.html
// /str/
// 4.问号传参                       （可能不出现）
// ?xxx=xxx&xxx=xxx
// 5.哈希值
// #xxx

</script>
</html>